<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<style>
			/* 尺寸问题：屏幕宽高比不一致，限定一个宽高范围
			 min-width属性：最小宽度【√】  min-height属性：最小高度
			 max-width属性：最大宽度     max-height属性：最大高度
			 */
			/* div{
				width: 80%;/* 默认宽度 */
				/* min-width: 500px;/* 内容最小宽度是500px，不能改变*/ */
				/* max-width: 600px;/* 页面尺寸最小500px最大600px默认80%*/ */
				/*定好最小跟最大宽高，PC：80% 300px  
				                    移动 500~600宽度[页面不变 ]300px
									自适应
				*/
				/* height: 300px;/* */ 
				/* background: #00ffff; */
			/* } */ 
			.container{
				background-color: #f0f0f0;
				padding: 20px;
			}
			/**
			 * html结构   外层div--.container    内层div--box  写lorem
			 *css结构      .container样式：背景颜色#f0f0f0
			 *                            padding：20px
			 *							  文本居中；
			 *            .box样式：背景颜色#4caf50
			 *                      文字改下颜色：白色
			 *                      宽度60%
			 *                      500~600宽度【页面不变】
			 *                      margin：auto；
			 */
		</style>
	</head>
	<body>
		<div class="container">
		<div class="box">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque illum necessitatibus esse, quidem praesentium nisi inventore a animi aspernatur repudiandae sed error soluta fugiat quia beatae fugit ipsa eius voluptate?</div>
	   </div>
	</body>
</html>